<template>
	<view class="container">
		<!-- 我的房间详情-顶部背景图 -->
		<view style="width: 100%; height: 200rpx; display: inline-flex; flex-direction: row; position: absolute">
			<view style="width: 16rpx"></view>
			<image src="/static/assets/my_room_detail_bg.png" style="width: auto; flex-grow: 1; height: 200rpx"></image>
			<view style="width: 16rpx"></view>
		</view>

		<!-- 占位 -->
		<view style="width: 100%; height: 246rpx"></view>

		<!-- 业主信息 业主姓名 联系方式 -->
		<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<view style="color: #999; font-size: 28rpx">业主姓名：{{ detail.row.owner_name }}</view>
			<view style="color: #999; font-size: 28rpx">联系方式：{{ detail.row.owner_tel }}</view>
		</view>

		<!-- 身份证号 -->
		<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<view style="color: #999; font-size: 28rpx">身份证号：{{ detail.row.identity }}</view>
		</view>

		<!-- 房间性质 房屋数量 -->
		<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<view style="color: #999; font-size: 28rpx">房间性质：{{ detail.row.nature }}</view>
			<view style="color: #999; font-size: 28rpx">房屋数量：{{ detail.row.rooms }}</view>
		</view>

		<!-- 押金 -->
		<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<view style="color: #999; font-size: 28rpx">押金：{{ detail.row.deposit }}</view>
		</view>

		<!-- 房租缴费周期 -->
		<view style="display: flex; flex-direction: row; align-items: center; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<image style="width: 34rpx; height: 34rpx" src="/static/assets/room_detail_01.png"></image>
			<view style="color: #999; font-size: 28rpx; margin-left: 10rpx">房租缴费周期(月)：{{ detail.row.cycles }}</view>
		</view>

		<!-- 分割线 -->
		<view style="background-color: #e5e5e5; margin-left: 20rpx; margin-right: 20rpx; height: 1rpx; margin-top: 16rpx"></view>

		<!-- 占位 -->
		<view style="width: 100%; height: 20rpx"></view>

		<!-- 房间列表 -->
		<view class="item" :data-index="index" v-for="(item, index) in detail.info" :key="index">
			<!-- 图标 房间名 面积 -->

			<view style="display: flex; flex-direction: row; align-items: center; margin-left: 20rpx">
				<image src="/static/assets/house_16.png" style="width: 26rpx; height: 32rpx"></image>
				<view style="color: #000; font-size: 30rpx; margin-left: 20rpx; flex-grow: 1">{{ item.name }}</view>
				<view style="color: #00be6e; font-size: 28rpx; margin-left: 20rpx; margin-right: 20rpx">面积：{{ item.total_area }}㎡</view>
			</view>

			<!-- 房租 -->

			<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
				<view style="color: #999; font-size: 28rpx">房租(元/月)：{{ item.rent }}</view>
			</view>

			<!-- 占位 -->

			<view style="width: 100%; height: 20rpx"></view>
		</view>
	</view>
</template>

<script>
	const app = getApp(); // 获取应用实例
	import { getRoomDetail } from '../../../../utils/http/api';
	export default {
		data() {
			return {
				// 记录传过来的id
				id: '',
				/** 房间详情 数据格式
  { "id": '',"type": 0,"name": "二号","owner_name": "","owner_tel": "", "rooms": 1,"unit": "","desc": "","enter_time": '',"total_area": "",
  "identity": "", "rent": "10","nature": 2,"deposit": "20.00","end_time": 1656604800, }
   */
				detail: {
					row: {
						owner_name: '',
						owner_tel: '',
						identity: '',
						nature: '',
						rooms: '',
						deposit: '',
						cycles: ''
					},

					info: []
				}
			};
		}, // 生命周期函数--监听页面加载
		onLoad: function(options) {
			this.setData({ id: options.id })
			this.reqRoomDetail()
		},
		// 生命周期函数--监听页面显示
		onShow: function() {},
		// 页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {},
		methods: {
			// 请求房间详情 getRoomDetail
			async reqRoomDetail() {
				uni.showLoading({ title: '处理中', mask: true })
				let { code, msg, data } = await getRoomDetail({ id: this.id, token: app.globalData.gl.token })
				if (code == '1') {
					this.setData({ detail: data })
				} else {
					uni.showToast({ title: msg, icon: 'error' })
				}
			}
		}
	};
</script>
<style>
	.container {
		display: flex;
		flex-direction: column;
	}

	.input {
		width: auto;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		border-width: 5rpx;
		border-color: #f8f8f8;
		border-style: solid;
		border-radius: 10rpx;
	}
</style>